<template>
  <div class="flex flex-col justify-center px-4 sm:px-6 lg:px-8 py-10 space-y-12">
    <!-- 用户信息 -->
    <NCard class="shadow-none w-full" card="~">
      <NCardHeader>
        <div class="flex flex-col gap-1">
          <NCardTitle class="text-xl font-semibold">基本信息</NCardTitle>
          <NCardDescription class="text-muted-foreground">您账户的基础资料</NCardDescription>
        </div>
      </NCardHeader>
      <hr class="my-2 border-gray-200" />
      <NCardContent class="space-y-6">
        <div class="flex flex-col lg:flex-row gap-8">
          <!-- 头像 -->
          <div class="flex items-center gap-4">
            <img :src="avatarUrl" class="w-20 h-20 rounded-full border shadow" alt="用户头像" />
          </div>

          <div class="flex-1 space-y-6">

        <div>
          <NLabel class="text-sm font-medium text-gray-600">用户名</NLabel>
          <div v-if="!editingName" class="flex items-center gap-2 mt-1">
            <span class="text-base">{{ user.name }}</span>
            <NButton size="sm" variant="ghost" @click="editingName = true">编辑</NButton>
          </div>
          <div v-else class="flex items-center gap-2 mt-1">
            <NInput v-model="user.name" class="w-full max-w-sm" />
            <NButton size="sm" @click="editingName = false">保存</NButton>
          </div>
        </div>

        <!-- 邮箱 -->
            <div>
              <NLabel class="text-sm font-medium text-gray-600">绑定邮箱</NLabel>
              <p class="text-sm text-muted-foreground mt-1">{{ user.email }}</p>
            </div>
          </div>
        </div>
      </NCardContent>
    </NCard>

    <!-- 第三方账号绑定 -->
    <NCard class="shadow-none w-full" card="~">
      <NCardHeader>
        <div class="flex flex-col gap-1">
          <NCardTitle class="text-xl font-semibold">第三方账号</NCardTitle>
          <NCardDescription class="text-muted-foreground">使用社交账号登录</NCardDescription>
        </div>
      </NCardHeader>
      <hr class="my-2 border-gray-200" />
      <NCardContent class="space-y-6">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center">
          <div>
            <NLabel class="text-sm font-medium text-gray-600">Google 账号</NLabel>
            <p class="text-sm text-muted-foreground mt-1">{{ user.google || '未绑定' }}</p>
          </div>
          <NButton v-if="!user.google" class="mt-2 sm:mt-0">绑定</NButton>
        </div>
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center">
          <div>
            <NLabel class="text-sm font-medium text-gray-600">GitHub 账号</NLabel>
            <p class="text-sm text-muted-foreground mt-1">{{ user.github || '未绑定' }}</p>
          </div>
          <NButton v-if="!user.github" class="mt-2 sm:mt-0">绑定</NButton>
        </div>
      </NCardContent>
    </NCard>

    <!-- 套餐信息 -->
    <NCard class="shadow-none w-full" card="~">
      <NCardHeader>
        <div class="flex flex-col gap-1">
          <NCardTitle class="text-xl font-semibold">当前套餐</NCardTitle>
          <NCardDescription class="text-muted-foreground">使用情况与升级选项</NCardDescription>
        </div>
      </NCardHeader>
      <hr class="my-2 border-gray-200" />
      <NCardContent class="space-y-4">
        <div>
          <NLabel class="text-sm font-medium text-gray-600">{{ user.plan.name }}</NLabel>
          <p class="text-sm text-muted-foreground mt-1">{{ user.plan.description }}</p>
        </div>
        <NButton v-if="user.plan.upgradable">升级套餐</NButton>
      </NCardContent>
    </NCard>
  </div>
</template>

<script setup>
  definePageMeta({ layout: 'secure' })
const user = reactive({
  name: 'Davin Bao',
  email: 'davin@example.com',
  avatar: '/avatar.png',
  google: '',
  github: 'github.com/davin',
  plan: {
    name: '基础版',
    description: '适用于日常个人使用，支持最多5张思维导图。',
    upgradable: true
  }
})

const avatarUrl = computed(() => user.avatar || '/default-avatar.png')
const editingName = ref(false)
</script>
